Vers une programmation des systèmes interactifs centrée sur la spécification de modèles exécutables

class Element { } class Edge extends Element { opt start :: Node.outgoing opt end :: Node.incoming } class Node extends Element { one label one x one y set outgoing :: Edge.start set incoming :: Edge.end } Les contenants de type set, opt et one sont utilisés pour représenter les propriétés (attributs et relations) modi ables des classes Graph, Node et Edge. Le symbole :: permet de déclarer les relations opposées. Par exemple, la relation Edget.start est la relation opposée de Node.outgoing (et vice versa), si bien que l'ajout d'un n÷ud n dans la relation e.start d'un sommet e induit l'ajout automatique de e dans la relation n.outgoing. Modèle des présentations L'interface graphique de l'application est dé nie par la classe racine Canvas suivante (étape Â) : class Canvas { one nodeTool = true one edgeTool one eraserTool set topLayer set bottomLayer Node Edge Eraser {bottomLayer} {topLayer} } Les trois premières propriétés sont des attributs booléens représentant l'état des sélecteurs des trois outils Node , Edge et Eraser . Les deux propriétés suivantes représentent des relations dé nissant le contenu avant (topLayer) et arrière (bottomLayer) utilisés respectivement pour l'a chage des n÷uds et des sommets. Le code HTML qui suit la dé nition des propriétés dé nit le symbole graphique représentant l'application dans son ensemble. Ce symbole est constitué de trois boutons radio HTML suivis d'une zone de dessin SVG. Il utilise la syntaxe étendue du langage XML qui permet de contrôler le contenu du symbole une fois ce dernier instancié en un fragment DOM. Les accolades simples délimitent un fragment DOM qui contiendra ce qui est spéci é dans l'expression entre accolades. Par exemple, l'expression {bottomLayer} précise que le contenu du contenant bottomLayer sera placé à l'endroit même des accolades. Lorsque des accolades doubles sont utilisées, le lien entre le contenant Loa et le texte DOM associé est bidirectionnel. Par exemple, l'expression {{nodeTool}} 2.5. VERS UN CADRE LOGICIEL UNIFIÉ 63 précise que la propriété booléenne nodeTool dé nit l'état du premier bouton radio, cet état pouvant être xé soit par le canvas lui-même a n de préciser quel bouton est sélectionné (lien Loa→DOM), soit par l'utilisateur lorsqu'il appuie sur un bouton (lien DOM→Loa). La classe de base Shape dé nit les données communes aux formes géométriques considérées : abstract class Shape { one x0 one y0 one stroke = 'black' }class Shape { one x0 one y0 one stroke = 'black' } Elle est utilisée par la classe Circle comme suit : class Circle extends Shape { opt text {text} } La classe Line est dé nie de manière analogue à la classe Circle. L'ensemble de ces quatre classes Canvas, Shape, Circle et Line formalise ainsi le prototype de l'interface réalisée en HTML par le designer lors de l'étape Á, en extrayant de ce prototype les éléments graphiques de base de manière à en faire des symboles. Modèle des actions et des interactions La dé nition des interactions et des actions s'e ectue également via des classes en Loa. Cependant, ces classes ne sont pas à dé nir par le développeur car elles sont fournies par l'API standard de Loa. Par exemple, les classes Click et Create sont ainsi prédé nies : class Click { one button = 1 one count = 1 one type opt x opt y opt target } class Create { one type opt parent opt relation opt instance } La propriété Click.type précise sur quel type d'objet (côté présentation ou objet métier) le clic doit être considéré. Si un tel clic survient, la propriété Click.target précise alors l'objet sur lequel le clic est survenu. La propriété Create.type précise quelle classe doit être instanciée pour créer l'objet en question, cet objet étant alors placé dans le contenant Create.instance. La propriété Create.parent précise alors, conjointement à la propriété Create.relation, dans quel contenant l'objet créé doit être placé. Ces deux classes Click et Create sont utilisées pour dé nir un interacteur permettant la création d'un n÷ud. Cet interacteur est dé ni dans la section suivante. Correspondances entre les modèles Les objets du domaine et leurs présentations via des symboles sont mis en correspondance en utilisant l'opération active map (étape Ã), comme l'illustre l'exemple suivant : 64 CHAPITRE 2. CONTRIBUTION Canvas G2C(Graph g) { Canvas c = new Canvas() c.topLayer ::= g.elements−>as(Node)−>map(N2C) c.bottomLayer ::= g.elements−>as(Edge)−>map(E2L) return c } Line E2L(Edge e) { Line l = new Line() l .x0 ::= e. start .x l .y0 ::= e. start .y l .x1 ::= e.end.x l .y1 ::= e.end.y return l } La fonction G2C crée un canvas c lié au graphe g en y accueillant les n÷uds et sommets de g dans les couches respectives topLayer et bottomLayer. Les sommets sont représentés par des lignes mises en correspondance via la fonction E2L. La mise en correspondance des n÷uds avec des cercles est opérée de manière analogue à E2C par la fonction N2C. L'interacteur de création de n÷ud est construit en utilisant la classe ClickCreate prédé nie par Loa, laquelle mixe l'interaction Click avec l'action Create (étape Ä), comme suit : 1 ClickCreate C2NC(Canvas canvas) { 2 ClickCreate i = new ClickCreate() 3 i .enabled ::= canvas.nodeTool 4 i . target ::= canvas 5 i . click .count = 2 6 i . click .type = Graph 7 i . create .type = Node 8 i . create .parent = i. click . target 9 i . create . relation = Graph.elements 10 opt createdNode = i.create.instance−>as(Node) 11 createdNode.x ::= i . click .x 12 createdNode.y ::= i . click .y 13 return ClickCreate 14 } L'interacteur n'est actif que si l'outil Node du canvas est sélectionné (ligne 3). Son interaction Click concerne un double clic (ligne 5) sur une instance de la classe Graph (ligne 6). Lorsque ce double clic a lieu, une instance de Node est créée (ligne 7), est insérée dans le contenant elements (ligne 9) du graphe cliqué (ligne 8), pour être stockée dans un contenant (ligne 10). Le lien entre la position de l'interaction et celle du n÷ud créé est nalement établi (lignes 11 et 12).